<template>
  <div v-permission="['base-data:member-account-log:query']">
    <page-wrapper content-full-height fixed-height>
      <!-- 数据列表 -->
      <vxe-grid
        id="MemberAccountLog"
        ref="grid"
        resizable
        show-overflow
        highlight-hover-row
        keep-source
        row-id="id"
        :proxy-config="proxyConfig"
        :columns="tableColumn"
        :toolbar-config="toolbarConfig"
        :custom-config="{}"
        :pager-config="{}"
        :loading="loading"
        height="auto"
      >
        <!-- 搜索表单 -->
        <template #form>
          <j-border>
            <j-form bordered label-width="80px" @collapse="grid.refreshColumn()">
              <j-form-item label="变动类型">
                <a-select
                  v-model:value="searchFormData.changeType"
                  mode="multiple"
                  placeholder="全部"
                  allow-clear
                >
                  <a-select-option
                    v-for="item in _This().$enums.MEMBER_ACCOUNT_CHANGE_TYPE.values()"
                    :key="item.code"
                    :value="item.code"
                    >{{ item.desc }}</a-select-option
                  >
                </a-select>
              </j-form-item>
            </j-form>
          </j-border>
        </template>
        <!-- 工具栏 -->
        <template #toolbar_buttons>
          <a-space>
            <a-button type="primary" @click="search" :loading="loading">查询</a-button>
          </a-space>
        </template>

        <!-- 变动类型 列自定义内容 -->
        <template #changeType_default="{ row }">
          <span>
            {{
              _This()
                .$enums.MEMBER_ACCOUNT_CHANGE_TYPE.values()
                .filter((item) => item.code == row.changeType)[0]?.desc || '未知'
            }}
          </span>
        </template>
      </vxe-grid>
    </page-wrapper>
  </div>
</template>

<script setup lang="ts">
  import { ref, getCurrentInstance } from 'vue';
  import { VxeTableDefines, VxeGridPropTypes } from 'vxe-pc-ui';
  import * as api from '@/api/base-data/member-account-log';

  // 组件参数
  const props = defineProps({
    // 会员ID
    memberId: {
      type: String,
      required: true,
    },
  });

  // this对象
  const instance: any = getCurrentInstance();

  // 表格对象
  const grid = ref();

  // 列表数据加载状态
  const loading = ref(false);

  // 请求接口配置
  const proxyConfig = ref<VxeGridPropTypes.ProxyConfig>({
    props: {
      // 响应结果列表字段
      result: 'datas',
      // 响应结果总条数字段
      total: 'totalCount',
    },
    ajax: {
      // 查询接口
      query: ({ page, sorts }) => {
        const params = buildQueryParams(page, sorts);
        console.log('params', params);
        return api.query(params);
      },
    },
  });

  // 列表数据配置
  const tableColumn = ref<VxeTableDefines.ColumnOptions[]>([
    { type: 'checkbox', width: 45 },
    {
      field: 'changeType',
      title: '变动类型',
      minWidth: 100,
      slots: { default: 'changeType_default' },
    },
    { field: 'beforeScore', title: '变动前', minWidth: 180 },
    { field: 'changeScore', title: '变动', minWidth: 200 },
    { field: 'afterScore', title: '变动后', minWidth: 200 },
    { field: 'reason', title: '变动原因', minWidth: 200 },
    { field: 'createTime', title: '创建时间', width: 170, sortable: true },
  ]);

  // 工具栏配置
  const toolbarConfig = ref<VxeGridPropTypes.ToolbarConfig>({
    // 自定义左侧工具栏
    slots: {
      buttons: 'toolbar_buttons',
    },
  });
  // 查询列表的查询条件
  const searchFormData = ref({
    changeType: [],
  });

  // 构建查询参数
  const buildQueryParams = (page, sorts) => {
    return {
      ..._This().$utils.buildSortPageVo(page, sorts),
      ...buildSearchFormData(),
    };
  };

  // 查询前构建具体地查询参数
  const buildSearchFormData = () => {
    return {
      memberId: props.memberId,
      ...searchFormData.value,
      changeType: searchFormData.value.changeType.join(','),
    };
  };

  // 搜索
  const search = () => {
    grid.value.commitProxy('reload');
  };

  // 组件实例对象
  const _This = () => {
    return instance.appContext.config.globalProperties;
  };

  // 暴露方法
  defineExpose({
    search,
  });
</script>

<style scoped></style>
